<mat-toolbar color="primary">
  <mat-toolbar-row>
    <h1>ngx-markdown</h1>
    <span fxFlex></span>
    <button mat-icon-button (click)="toggleTheme()">
      <mat-icon>
        <img [hidden]="theme === 'light'" src="icon-light-on.svg">
        <img [hidden]="theme === 'dark'" src="icon-light-off.svg">
      </mat-icon>
    </button>
    <a mat-icon-button href="https://github.com/jfcere/ngx-markdown">
      <img class="github-icon" src="icon-github.svg">
    </a>
  </mat-toolbar-row>
</mat-toolbar>

<nav mat-tab-nav-bar [tabPanel]="tabPanel" mat-stretch-tabs="false" backgroundColor="primary" disableRipple fitInkBarToContent #tabHeader>
  @for (route of routes; track route) {
    <a mat-tab-link #tabLink="routerLinkActive"
      [active]="tabLink.isActive"
      [routerLink]="route.path"
      routerLinkActive>
      <div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="8px">
        <img src="icon-{{route.path}}.svg">
        <span>{{ route.data?.['label'] }}</span>
      </div>
    </a>
  }
</nav>

<mat-tab-nav-panel class="outlet-wrapper" [@routeAnimation]="getRouteAnimation(outlet)" (@routeAnimation.Done)="handleFragment()" #tabPanel>
  <router-outlet #outlet="outlet"></router-outlet>
</mat-tab-nav-panel>